<template>
  <div class="box">
    <template>
      <el-tabs v-model="activeName">
        <el-tab-pane
          label="角色管理"
          name="first"
        >
          <el-button type="primary" @click="changeRole">新增角色</el-button>
          <el-card class="table-wrapper">
            <my-table
              :table-props="{
                data: companyList.rows,
                border: true
              }"
              :columns="[
                { label: '序号', prop: 'index', width: 100, align: 'center'},
                { label: '姓名', prop: 'name', width: 200, align: 'center'},
                { label: '描述', prop: 'description', align: 'center'},
                { label: '操作', slotName: 'mobile', align: 'center'}, // 带插槽
              ]"
              :pagination-props="{
                layout: 'total, pager',
                total: companyList.total,
                currentPage: currentPage,
                pageSize: pageSize
              }"
              :pagination-events="events"
            >
              <template #mobile>
                <el-row>
                  <el-button type="success" @click="onPermission">分配权限</el-button>
                  <el-button type="primary" @click="changeRole">编辑</el-button>
                  <el-button type="danger" @click="del">删除</el-button>
                </el-row>
              </template>
            </my-table>
          </el-card>
        </el-tab-pane>
        <!-- 分配权限 -->
        <el-dialog title="分配权限" :visible.sync="PermissionVisible">
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
          <el-tree
            :data="departmentTree"
            show-checkbox
            node-key="id"
            :props="{
              children: 'children',
              label: 'name'
            }"
            default-expand-all>
          </el-tree>
        </el-dialog>
        <!-- 编辑角色弹窗 -->
       <div class="deit">
         <el-dialog title="编辑角色"  :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="角色名称" label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色描述" label-width="formLabelWidth">
              <el-input v-model="form.describe" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>
       </div>

        <!-- 公司信息 -->
        <el-tab-pane
          label="公司信息"
          name="second"
        >
          <!-- 警告消息 -->
          <template>
            <el-alert
              title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
              type="info"
              :closable="false"
              show-icon
            />
          </template>
          <div style="margin: 60px;"></div>
          <!-- 公司信息表单 -->
          <el-form
            label-width="80px"
            :model="formLabelAlign"
            :disabled="true"
          >
            <el-form-item label="公司名称">
              <el-input v-model="formLabelAlign.name"></el-input>
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input v-model="formLabelAlign.address"></el-input>
            </el-form-item>
            <el-form-item label="公司邮箱">
              <el-input v-model="formLabelAlign.email"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="formLabelAlign.remark"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </template>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters } from 'vuex'
export default {
  name: 'Company',
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      events: {
        'current-change': this.onCurrentPageChange
      },
      activeName: 'first',
      formLabelAlign: {
        name: '江苏传智播客教育科技股份有限公司',
        address: '北京市昌平区建材城西路金燕龙办公楼一层',
        email: 'bd@itcastcn',
        remark: '传智播客官网-好口碑IT培训机构,一样的教育,不一样的品质'
      },
      // 编辑角色
      form: {
        name: '系统管理员',
        describe:'管理整合平台，可以操作企业所有功能'
      },
      dialogFormVisible: false,
      //分配权限
      PermissionVisible: false,
      formLabelWidth: '140px',
    }
  },
  computed: {
    ...mapState('company', [
      'companyList'
    ]),
    ...mapState('company', [
      'Permission',
    ]),
    ...mapGetters('company', [
      'departmentTree',
    ])
  },
  methods: {
    ...mapActions('company', [
      'updateCompanyList'
    ]),
    ...mapActions('company', [
      'updatePermissionList'
    ]),
    // 改变分页状态
    onCurrentPageChange(currentPage) {
      this.currentPage = currentPage
      this.updateCompanyList({
        page: this.currentPage,
        size: this.pageSize
      })
    },
    // 编辑角色弹窗
    changeRole() {
      this.dialogFormVisible = true
    },
    // 删除弹窗
    del(id) {
      this.$confirm('确定删除此角色?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //分配权限
    onPermission(){
      this.PermissionVisible = true
      this.updatePermissionList()
      console.log(this.departmentTree);
    }

  },
  // 初始化
  async created() {
    await this.updateCompanyList({
      page: this.currentPage,
      size: this.pageSize
    })
  },

}
</script>

<style lang="scss" scoped>
.box {
  padding: 16px;
}
</style>
